// out: false,main:../map_normal.less,main:../map_dark.less
/* 动画22 */
.left_box,
// .r-box,
.topen,
.tclose,
#layerBtnItem,
.floatBox {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.testbk{
  border:1px solid #f00;
}
.topen{
  width:300px;
}
.tclose{
  width:100px;
}
.testl{
  float:left;
}
.testr{
  float:left;
}

.mClose{
  position: relative;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}
.mOpen{
  visibility: visible;
  opacity: 1;
}

@-webkit-keyframes layui-zy {
  /* 从左往右滑入 */
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes layui-zy {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.layui-anim-zy {
  -webkit-animation-name: layui-zy;
  animation-name: layui-zy;
}

@-webkit-keyframes layui-yz {
  /* 从右往左滑入 */
  from {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
}
@keyframes layui-yz {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
.layui-anim-yz {
  -webkit-animation-name: layui-yz;
  animation-name: layui-yz;
}
.layui-anim-zy.layer-anim-close {
  -webkit-animation-name: layui-yz;
  animation-name: layui-yz;
}


.animate{
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;  
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
  -moz-backface-visibility:hidden; /* Firefox */
  -ms-backface-visibility:hidden; /* Internet Explorer */
}

.flash(@speed: 1s) {
  -webkit-animation-duration: @speed;
  animation-duration: @speed;
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both; 
}
.tx-slow{
  .flash(1s)
}
.tx-fast{
  .flash(0.3s)
}